<template>
<div class="detective-group-chart">
  <div class="panel">
    <xdh-go
      :layout="layout" 
      :nodes="nodes"
      :links="links"
      :type="model"
      :node-template="nodeTemplate"
      :link-template="linkTemplate"
      :config="config"
      @on-ready="chartReadyInit"
    >
    </xdh-go>
  <!-- :link-template="linkTemplate" -->
  </div>
  
  <xdh-dialog-form mode="insert"
    title="新增"
    :model="nodeModel"
    :rules="nodeRules"
    :closed.sync="formClose"
    :on-insert="handleInsert"
    >
    <template slot-scope="scope">
      <el-form-item label="id" prop="key"> 
        <el-input size="mini" v-model="scope.model.key"></el-input>
      </el-form-item>
      <el-form-item label="组名" prop="title">
        <el-input size="mini" v-model="scope.model.title"></el-input>
      </el-form-item>
      <el-form-item label="责任单位" prop="remark">
        <el-input size="mini" v-model="scope.model.remark" ></el-input>
      </el-form-item>
      <el-form-item label="负责人">
        <el-input size="mini" v-model="scope.model.director"  ></el-input>
      </el-form-item>
      <el-form-item label="联系人" >
        <el-input size="mini" v-model="scope.model.connector"  ></el-input>
      </el-form-item>
      <el-form-item label="成员数" >
        <el-input size="mini" v-model="scope.model.members" ></el-input>
      </el-form-item>
      <el-form-item label="父级" >
        <el-input size="mini" :disabled="true" v-model="scope.model.from" ></el-input>
      </el-form-item>
      <!-- title: '',
        unit: '', // 责任单位
        director: '', // 负责人
        connector: '', // 联系人
        members: 1, // 成员数 -->
    </template>
  </xdh-dialog-form>
</div>
</template>

<style lang="scss" scoped>
.detective-group-chart{
  width: 100%;
  height: 100%;
  .panel{
    width: 100%;
    height: 100%;
  }
}

</style>

<script>
import XdhDialogForm from '@/widgets/xdh-dialog-form'
import XdhGo from '@/widgets/xdh-go'
import { departmentNode, toolBtn } from './depNode.js'
export default {
  name: '',
  components: {
    XdhGo,
    XdhDialogForm
  },
  props: {
  },
  data() {
    return {
      diagram: null,
      formClose: true,
      nodeModel: {
        key: 0,
        title: '',
        unit: '', // 责任单位
        director: '', // 负责人
        connector: '', // 联系人
        members: 1, // 成员数
        from: 0
      },
      nodeRules: {
        key: [{required: true, message: 'id是必填项'}],
        title: [{required: true, message: '标题是必填项'}]
      },
      // -----------------
      // events: {
      //   'Modified': (e) => { console.log(e.diagram.model.toJson()) }
      // },
      model: 'GraphLinksModel',
      nodes: [
        {
          key: 1,
          title: '指挥组',
          persons: [{name: '张云涨'}, {name: '李宇'}, {name: '曹宫韦'}, {name: '方大宇'}],
          personCount: 4,
          type: '内部组'
        },
        {
          key: 2,
          title: '指挥组',
          persons: [{name: '张云涨'}, {name: '李宇'}, {name: '曹宫韦'}, {name: '方大宇'}],
          personCount: 4,
          type: '内部组'
        },
        {
          key: 3,
          title: '指挥组',
          persons: [{name: '张云涨'}, {name: '李宇'}, {name: '曹宫韦'}, {name: '方大宇'}, {name: '曹宫韦'}, {name: '方大宇'}, {name: '李宇'}],
          personCount: 4,
          type: '内部组'
        }
      ],
      links: [
        { from: 1, to: 2 },
        { from: 1, to: 3 }
      ]
    }
  },
  watch: {},
  methods: {
    chartReadyInit(diagram, $, go) {
      this.diagram = diagram
    }, 
    handleInsert(data) {
      const propIndex = {
        unit: '责任单位', // 
        director: '负责人', // 
        connector: '联系人', // 
        members: '成员数' // 
      }
      let contents = []
      Object.entries(data).forEach((item) => {
        if (propIndex[item[0]]) {
          let obj = {prop: propIndex[item[0]], value: item[1]}
          contents.push(obj)
        }
      })
      
      let node = {
        key: data.key,
        title: data.title,
        contents: contents,
        type: '内部组'
      }
      let link = {
        from: data.from,
        to: data.key
      }
      this.nodes.push(node)
      this.links.push(link)
      return Promise.resolve()
    },
    layout($, go) {
      return $(go.TreeLayout) // $(go.TreeLayout, { angle: 90, nodeSpacing: 5 })
    },
    config($, go) {
      return {
        initialContentAlignment: go.Spot.Center,
        'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom,
        'undoManager.isEnabled': true
      }
    },
    nodeTemplate($, go) {
      return departmentNode($, go, this.depTools)
    },
    linkTemplate($, go) {
      return $(go.Link,
        { routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
        $(go.Shape, { strokeWidth: 5, stroke: 'gray' })
      )
    },
    depTools($, go) {
      let delBtn = {
        color: '#F7051F',
        icon: 'delete',
        fn: (e, obj) => {
          console.log('delete', e)
        }
      }
      let addBtn = {
        color: '#90552C',
        icon: 'add',
        fn: (e, obj) => {
          console.log('add', e)
          this.nodeModel.from = obj.part.data.key
          this.formClose = false
        }
      }
      let editBtn = {
        color: '#6A9D3B',
        icon: 'edit',
        fn: (e, obj) => {
          console.log('add', e)
        }
      }
      return $(go.Panel, 'Horizontal',
        toolBtn($, go, delBtn),
        toolBtn($, go, addBtn),
        toolBtn($, go, editBtn)
      )
    }
    
  },
  mounted() {
  }
}
</script>

